<template>
    <view class="container">
        <view class="settings-group">
            <view class="setting-item" @click="clearCache">
                <text class="item-name">清除缓存</text>
				<text class="item-value">{{cacheSize}}</text>
				<uni-icons type="right" size="15"></uni-icons>
            </view>
            <view class="setting-item" @click="togglePush">
                <text class="item-name">消息推送</text>
                <switch class="item-switch" :checked="isPushOn"></switch>
            </view>
            <view class="setting-item" @click="feedback">
                <text class="item-name">意见反馈</text>
                <uni-icons type="right" size="15"></uni-icons>
            </view>
        </view>
        
        <view class="settings-group">
            <view class="setting-item" @click="about">
                <text class="item-name">关于我们</text>
                <text class="item-value">v1.0.0</text>
                <uni-icons type="right" size="15"></uni-icons>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            cacheSize: '23.5MB',
            isPushOn: true
        }
    },
    methods: {
        clearCache() {
            uni.showModal({
                title: '清除缓存',
                content: '确定要清除应用缓存吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 模拟清除缓存
                        setTimeout(() => {
                            this.cacheSize = '0MB';
                            uni.showToast({
                                title: '缓存已清除',
                                icon: 'success'
                            });
                        }, 500);
                    }
                }
            });
        },
        togglePush() {
            this.isPushOn = !this.isPushOn;
            uni.showToast({
                title: this.isPushOn ? '消息推送已开启' : '消息推送已关闭',
                icon: 'none'
            });
        },
        feedback() {
            uni.navigateTo({
                url: '/pages/feedback/feedback'
            });
        },
        about() {
            uni.navigateTo({
                url: '/pages/about/about'
            });
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #f5f5f5;
	padding-top: 15px;
}

.settings-group {
    background-color: #fff;
}

.settings-group:last-child {
    margin-top: 10px;
}

.setting-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.setting-item:last-child {
    border-bottom: none;
}

.item-name {
	flex: 1;
    font-size: 16px;
    color: #333;
}

.item-value {
    font-size: 14px;
    color: #999;
    margin-right: 10px;
}

.item-switch {
    transform: scale(0.8);
}

.icon-arrow-right {
    font-size: 14px;
    color: #999;
}
</style>